import React, { Component } from 'react'
import {NavigationContainer} from '@react-navigation/native'
import {CardStyleInterpolators, createStackNavigator, HeaderStyleInterpolators, StackNavigationProp} from '@react-navigation/stack'
// 将标签嵌套在堆栈
import BottomTabs from './BottomTabs'
import Detail from '@/pages/Detail'
import { Platform, StyleSheet } from 'react-native'
export type RootStackParamList = {
  BottomTabs: {
    screen?: string
  };
  // 设置动态路由
  Detail: {
    id: number;
  };
}

// 导航属性的类型
export type RootStackNavigation = StackNavigationProp<RootStackParamList>

let Stack = createStackNavigator<RootStackParamList>()

export default class Navigator extends Component {
  render() {
    return (
      <NavigationContainer>
        {/* headerMode设置路由切换动画效果 */}
        {/* screenOptions配置头部样式 */}
        <Stack.Navigator
          headerMode="float"
          initialRouteName="BottomTabs"
          screenOptions={
            {
              headerTitleAlign: 'center',
              headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
              // 开启手势系统
              gestureEnabled: true,
              // 按照不同系统设置不同的效果
              headerStyle: {
                // 取消安卓的边框阴影
                ...Platform.select({
                  android: {
                    elevation: 0,
                    borderBottomWidth: StyleSheet.hairlineWidth
                  }
                })
              }
            }
          }
        >
          {/* options配置项 */}
          <Stack.Screen name="BottomTabs" component={BottomTabs} options={{headerTitle: '首页'}}/>
          <Stack.Screen name="Detail" component={Detail} options={{headerTitle: '详情页'}}/>

        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}
